<template>
  <div class="detail">
    <div class="top">
      <div class="head c-testimg"></div>
      <div class="cont">
        <div class="name">靖观天下</div>
        <div class="time">2小时前</div>
      </div>
      <div class="icon">一小群<i class="icon-arrow1"></i></div>
    </div>
    <div class="content">
      <div class="article">蝴蝶是我，我就是蝴蝶。每个人都有个一梦想，我的梦想就是睡着也能赚钱。蝴蝶是我，我就是蝴蝶</div>
      <ul class="article-imgs only">
        <li class="c-testimg"></li>
      </ul>
      <ul class="article-imgs">
        <li class="c-testimg"></li>
        <li class="c-testimg"></li>
        <li class="c-testimg"></li>
        <li class="c-testimg"></li>
      </ul>

      <div class="like">
        <div class="btn"><i class="icon-like"></i>喜欢</div>
        <ul class="imgs">
          <li class="c-testimg"></li>
          <li class="c-testimg"></li>
          <li class="c-testimg"></li>
          <li class="c-testimg"></li>
        </ul>
      </div>

      <!--评论-->
      <div class="comment">
        <h2>评 论<i></i></h2>
        <ul class="lists">
          <li class="list" v-for="(item,index) in lists">
            <div class="head c-testimg"></div>
            <div class="cont">
              <div class="zan">234 <i class="icon-like"></i></div>
              <div class="dt">我勒个去</div>
              <div class="dd">“冲天炮”形容很恰当，哈哈。这是小朋友比较喜欢的发型</div>
              <div class="time">1小时前</div>
              <ul class="mores">
                <li><b>隔壁老王：</b>厉害了word哥!</li>
                <li><b>隔壁老王：</b>厉害了word哥!</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>

      <!--喜欢-推荐-->
      <div class="like-group">
        <div class="tit">
          <span>喜欢就加入TA的群组</span>
        </div>
        <div class="recom">
          <div class="head c-testimg"></div>
          <div class="cont">
            <div class="dt">
              <span>王者农药</span>
              <div class="join">进入</div>
            </div>
            <div class="dd">如果你无法简洁的表达你的想法，那只说明你还不够了解它。</div>
            <div class="dd"><b>靖观天下</b>作者创建，已有<b>90+</b>成员</div>
          </div>
        </div>
      </div>
    </div>

    <div class="reply">
      <div class="input">发表你的观点</div>
      <div class="num"><i class="icon-comment2"></i> <span>23</span></div>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'detail',
        data () {
            return {
                lists : [0,1]
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../assets/css/common.scss";
  .detail{background-color: #fff;min-height: 100%;padding-bottom: rem(94);box-sizing: border-box;}
  .top{padding: rem(30);height: rem(80);@include border-half-all($border,'bottom');
    .head{@include head(80);}
    .cont{padding-left: rem(100);
      .name{line-height: rem(40);height: rem(40);color: $blue;}
      .time{font-size: rem(24);color: $black-light;margin-top: rem(5);line-height: rem(34);}
    }
    .icon{line-height: rem(40);height: rem(40);position: absolute;top: rem(50);right: rem(47);color: $black;
      i{margin-left: rem(5);vertical-align: rem(-2);}
    }
  }
  .content{padding: rem(20) rem(30);}
  .article{line-height: rem(52);font-size: rem(32);text-align: justify;}
  .article-imgs{overflow: hidden;margin-top: rem(10);margin-left: rem(-10);
    li{width: rem(220);height: rem(220);float: left;margin-left: rem(12);margin-top: rem(12);@include img-bg-show;}
    &.only li{width: 100%;height: rem(500);}
  }
  .like{margin-top: rem(60);text-align: center;
    .btn{width: rem(160);height: rem(60);border:1px solid $border;border-radius: 30px;line-height: rem(60);margin: 0 auto;
      i{vertical-align: rem(-2);margin-right: rem(12);}
    }
    .imgs{
      margin-top: rem(40);
      li{display: inline-block;@include head(40);float: none;border-radius: 100%;margin-left: rem(15);}
    }
  }
  .comment{
    margin-top: rem(88);
    h2{font-weight: normal;font-size: rem(40);text-align: center;position: relative;
      i{width: rem(26);height: rem(6);position: absolute;left: 50%;margin-left: rem(-13);background-color: $blue;border-radius: 25%;bottom: rem(-15);}
    }
    .lists{
      margin-top: rem(80);
      .list{overflow: hidden;padding-bottom: rem(68);
        .head{@include head(50);border-radius: 100%;}
        .cont{position: relative;
          padding-left: rem(70);
          .zan{position: absolute;top: 0;line-height: rem(40);height: rem(40);right: rem(2);color: $black-light;
            i{vertical-align: rem(-2);margin-left: rem(8);}
          }
          .dt{color: $black-light;line-height: rem(40);}
          .dd{font-size: rem(32);line-height: rem(48);margin-top: rem(12);text-align: justify;}
          .time{color: $black-light;font-size: rem(24);margin-top: rem(12);}
        }
        .mores{
          @include border-half-all($border,'top');margin-top: rem(28);padding-top: rem(10);
          li{padding-top: rem(13);line-height: rem(40);
            b{font-weight: normal;color: $black-light;}
          }
        }
      }
    }
  }
  .like-group{margin-top: rem(35);
    .tit{height: 1px;margin: 0 rem(93);background-color: $border-light;position: relative;
      span{position: absolute;height: rem(40);line-height: rem(40);color: $black-light;width: rem(300);text-align: center;top: rem(-20);background-color: #fff;left: 50%;margin-left: rem(-150);}
    }
    .recom{
      margin-top: rem(43);padding: rem(20) rem(30) rem(37) rem(20);background-color: $black-lighter;overflow: hidden;
      .head{@include head(100);}
      .cont{
        padding-left: rem(127);
        .dt{
          span{font-size: rem(30);line-height: rem(42);}
          .join{float: right;width: rem(80);height: rem(36);line-height: rem(36);margin-top: rem(3);border-radius: 3px;font-size: rem(24);color: #fff;text-align: center;background-color: $blue;}
        }
        .dd{
          line-height: rem(34);margin-top: rem(12);font-size: rem(24);color: $black-light;
          b{font-weight: normal;color: $blue;}
        }
      }
    }
  }
  .reply{
    @include border-half-all($border,'top');position: fixed;bottom: 0;background-color: $black-lighter;height: rem(94);width: 100%;max-width: $sreen;
    .input{
      position:relative;float: left;height: rem(64);width: rem(568);margin: rem(15) 0 rem(15) rem(28);background-color: #fff;border-radius: 30px;padding: 0 rem(30);line-height: rem(64);color: $black-light;
      &:before{@include border-half($border,'border');border-radius: 30px;}
    }
  }
</style>
